// 商家销售统计的横向柱状图
<template>
  <div class="com_container" style="height:100%;" @dblclick="chinaMap">
    <div style="height:100%;" class="com_chart" ref="map_page"></div>
  </div>
</template>

// 中国地图json文件生成
// https://hxkj.vip/demo/echartsMap/

<script>
import axios from 'axios'
import { getProvinceMapInfo } from '@/utils/map_utils.js'
import { mapState } from 'vuex'
export default {
  name: "Map",
  data() {
    return {
      dom: null, // 挂载图表容器的实例对象
      data: null, // 服务器中获取的数据
    };
  },
  // 模板渲染成html后调用
  mounted() {
    this.initChart(); // 初始化图表
    window.addEventListener('resize', this.screenAdapt)
    this.screenAdapt()
    console.log('你好呀！map组件')
  },
  // 组件销毁后
  destroyed() {
    clearInterval(this.timerId); // 关闭定时器
    window.removeEventListener('resize', this.screenAdapt)  // 移除这个事件
  },
  methods: {
    // 初始化echart实例(lnstance)对象
    initChart() {
      this.dom = this.$echarts.init(this.$refs.map_page, this.theme);
      // arg.name 得到所点击的省份，这个省份是中文
      this.dom.on('click', async (arg) => {
        // 将点击的arg.name文字改为拼音（例如：陕西就是 shanxi）
        const prvince = getProvinceMapInfo(arg.name)
        // 根据拼音获取本地的省份地图数据
        let prvinceMapData = await axios.get(`http://127.0.0.1:5500${prvince.path}`)
        console.log('地图组件，', prvince)
        // 注册地图
        this.$echarts.registerMap(prvince.key, prvinceMapData.data)
        let changeOption = {
          geo: {
            map: prvince.key
          }
        }
        this.dom.setOption(changeOption)
      })
      this.getData();
    },
    // 获取服务器的数据
    getData() {
      // 获取数据
      axios.get('http://127.0.0.1:5000/china').then((res) => {
        this.data = res.data
        this.updateChart()
      })
    },
    // 更新图表视图
    async updateChart() {
      this.$echarts.registerMap('china', this.data)
      // 获取散点图数据
      let { data } = await this.$http('map')
      let seriesArr = data.map(item => {
        // return的这个对象就代表的是一个类别的所有散点数据
        // 如果想在地图中显示散点数据，所以我们需要给散点的图表增加一个配置，coordinateSystem: 'geo'
        return {
          type: 'effectScatter',
          name: item.name,
          data: item.children,
          coordinateSystem: 'geo',
          rippleEffect: {
            scale: 10,   // 动画中波纹的最大缩放比例
            brushType: 'stroke' // 波纹的绘制方式
          }
        }
      })
      let legendArr = data.map(item => {
        return item.name
      })

      // 配置项
      let option = {
        title: {
          text: '▎商家分布',
          left: 20,
          top: 20
        },
        geo: {
          type: 'map',
          map: 'china',
          itemStyle: {
            areaColor: '#2E72BF',
            borderColor: '#333'
          }
        },
        legend: {
          data: legendArr,
          left: '5%',
          bottom: '5%',
          orient: 'vertical'
        },
        series: seriesArr
      };
      this.dom.setOption(option);
    },
    // 当浏览器大小发生变化时，就要让图表适配屏幕
    screenAdapt() {
      let titleAdaptData = this.$refs.map_page.offsetWidth / 100 * 3.6
      let option = {
        title: {
          textStyle: {
            fontSize: titleAdaptData
          }
        },
        legend: {
          itemWidth: titleAdaptData / 2,
          itemHeight: titleAdaptData / 2,
          itemGap: titleAdaptData / 2,
          textStyle: {
            fontSize: titleAdaptData / 2
          }
        }
      }
      this.dom.setOption(option);
      this.dom.resize()
    },
    // 中国地图
    chinaMap() {
      let option = {
        geo: {
          map: 'china'
        }
      }
      this.dom.setOption(option)
    }
  },
  computed: {
    ...mapState(['theme'])
  },
  watch: {
    theme() {
      this.dom.dispose() // 销毁当前的图表
      this.initChart()  // 重新以最新的主题名称初始化图表对象
      this.screenAdapt()  // 完成屏幕的适配
      this.updateChart()  // 更新图表的展示
    }
  }
};
</script>

<style lang="less" scoped></style>